<template>
    <div>
        <!-- 歌曲弹出层 -->
        <div v-if="this.songlist">
        <nut-popup position="bottom" :style="{ height: '90%' }" v-model="show" @close="closelist(tname)" :destroy-on-close="true">
            <div class="bg">
                <img :src="this.songsdetail.coverImgUrl" alt="">
            </div>
      <nut-cell :is-link="true" :show-icon="true" v-for="(item,index) in this.songlist" :key="item.id">
        <span slot="title">{{index+1}}、{{item.name}}</span>
        <span slot="sub-title">原唱：{{item.ar[0].name}}</span> 
      </nut-cell>
    </nut-popup>
    </div>
    </div>
</template>
<script>

export default {
    props:["songsdetail","shownew","tname","closelist"],
    data(){
        return{
            show:false,
            songlist:[],
        }
    },
    watch:{
        shownew(){
            this.show = this.shownew
        },
        songsdetail(){
            this.songlist = this.songsdetail.tracks
        }
    },

}
</script>
<style scoped>
.bg {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.bg img {
    width: 100%;
    margin-top: -100px;
}
</style>